﻿@using SharedRes = ViewRes.SharedStrings;
@using Res = ViewRes.Search.IndexStrings;

<!-- binding context: AlbumSearchViewModel -->

@{ Html.RenderPartial("Partials/_EntryCountBox"); }

<div data-bind="with: paging">
	@KnockoutHelpers.ServerSidePaging()
</div>
	
<!-- ko if: viewMode() == 'Details' -->
<table class="table table-striped" data-bind="css: { loading: loading }">
	<thead>
		<tr>
			<th colspan="2">
				<a data-bind="click: function() { sort('Name') }" href="#">
					@SharedRes.Name
					<span class="sortDirection_down" data-bind="visible: sort() == 'Name'"></span>
				</a>
			</th>
			<th data-bind="if: showTags">
				@SharedRes.Tags
			</th>
			<th>
				<a data-bind="click:function() { sort('ReleaseDate') }" href="#">
					@Res.ReleaseDate
					<span class="sortDirection_down" data-bind="visible: sort() == 'ReleaseDate'"></span>
				</a>
			</th>
			<th>
				<a data-bind="click: function() { sort('RatingAverage') }" href="#">
					@Res.Rating
					<span class="sortDirection_down" data-bind="visible: sort() == 'RatingAverage'"></span>
				</a>
			</th>
		</tr>
	</thead>
	<tbody data-bind="foreach: page">
		<tr>
			<td style="width: 80px">
				<a data-bind="attr: { href: vdb.utils.EntryUrlMapper.details('Album', id), title: $data.additionalNames }" href="#" class="coverPicThumb">
					<img data-bind="attr: { src: ($data.mainPicture && mainPicture.urlTinyThumb ? mainPicture.urlTinyThumb : $parent.unknownPictureUrl) }" title="Cover picture" alt="Cover picture" class="coverPicThumb img-rounded" />
				</a>
			</td>
			<td>
				<a data-bind="text: ko.filters.truncate(name, 150), attr: { href: vdb.utils.EntryUrlMapper.details('Album', id), title: $data.additionalNames }" href="#"></a>
				@KnockoutHelpers.DraftIcon("status")
				<br />
				<small class="extraInfo" data-bind="text: artistString"></small><br />
				<small class="extraInfo" data-bind="text: $parent.discTypeName(discType)"></small>
			</td>
			<td data-bind="if: $parent.showTags() && $data.tags" class="search-tags-column">
				<div data-bind="visible: tags.length">
					<i class="icon icon-tags"></i>
					<!-- ko foreach: tags -->
					<a href="#" data-bind="text: tag.name, click: function() { $parents[1].selectTag(tag); return false; }"></a><span data-bind="visible: $data != _.last($parent.tags)">,</span>
					<!-- /ko -->
				</div>
			</td>
			<td class="search-album-release-date-column">
				<span data-bind="text: releaseDate ? releaseDate.formatted : ''"></span>
				<span data-bind="visible: $data.releaseEvent">
					<br />
					<a data-bind="text: $data.releaseEvent ? $data.releaseEvent.name : '', attr: { href: vdb.utils.EntryUrlMapper.details('ReleaseEvent', $data.releaseEvent ? $data.releaseEvent.id : 0) }" href="#"></a>
				</span>
			</td>
			<td style="width: 150px">
				<span data-bind="attr: { title: ratingAverage }, foreach: $parent.ratingStars($data)">
					<img data-bind="attr: { src: enabled ? '/Content/star.png' : '/Content/star_disabled.png' }" />
				</span>
				<br />
				<span data-bind="text: ratingCount"></span>
				@Res.Times
			</td>
		</tr>
	</tbody>
</table>
<!-- /ko -->

<!-- ko if: viewMode() == 'Tiles' -->
<ul class="smallThumbs" data-bind="foreach: page">
	<li>
		<a data-bind="attr: { href: vdb.utils.EntryUrlMapper.details('Album', id), title: $data.additionalNames }" href="#">
			<div class="pictureFrame img-rounded">
				<img data-bind="attr: { src: ($data.mainPicture ? mainPicture.urlSmallThumb : $parent.unknownPictureUrl) }, albumToolTip: id" alt="Preview" class="coverPic img-rounded" />
			</div>
		</a>
		<p data-bind="text: name"></p>
	</li>
</ul>
<!-- /ko -->
		
<div data-bind="with: paging">
	@KnockoutHelpers.ServerSidePaging()
</div>
